<template>
  <div class="app">
    <News>
      <!-- 如果插槽没有名字，即：默认插槽，可以使用以下语法接收数据 -->
      <!-- <template scope="qwe"> -->
      <!-- <template slot-scope="qwe"> -->
      <!-- <template v-slot="qwe"> -->
      <!-- <template v-slot:default="qwe"> -->
      <!-- <template #default="qwe"> -->

      <!-- 如果插槽有名字，即：默认插槽，可以使用以下语法接收数据 -->
      <!-- <template scope="qwe" slot="s1">  -->
      <!-- <template slot-scope="qwe" slot="s1">  -->
      <!-- <template v-slot:s1="qwe">  -->
      <template #s1="qwe"> 
        <ul>
          <li v-for="news in qwe.newsList" :key="news.id">{{news.title}}</li>
        </ul>
      </template>
    </News>

    <News>
      <template #s1="{newsList}">
        <ol>
          <li v-for="news in newsList" :key="news.id">{{news.title}}</li>
        </ol>
      </template>
    </News>

    <News>
      <template #s1="{newsList}">
        <h3 v-for="news in newsList" :key="news.id">{{news.title}}</h3>
      </template>
    </News>
  </div>
</template>

<script>
  import News from './components/News.vue'
  export default {
    name:'App',
    components:{News},
  }
</script>

<style> 
  .app {
    background-color: gray;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
    display: flex;
    justify-content: space-evenly
  }
</style>